set_text_white()
  --text: white
  --text-p1: white
  --text-p2: hsl(0 0 88%)
  --text-p3: #ddd
  --text-code: white
set_text_black()
  --text: black
  --text-p1: #111
  --text-p2: hsl(0 0 12%)
  --text-p3: #555
  --text-code: white

set_dynamic_color($theme)
  --theme: $theme
  --theme-border: hsl(hue($theme), 50, 80)
  --theme-block: hsl(hue($theme), 90, 92)
  --theme-codeblock: hsl(hue($theme), 50, 95)
  --text: hsl(hue($theme), 55, 16)
  --text-p1: hsl(hue($theme), 55, 20)
  --text-p2: hsl(hue($theme), 90, 24)

.tag-plugin
  --theme: var(--text-p1)
  --theme-border: var(--block-border)
  --theme-block: var(--block)
  --theme-codeblock: var(--block)

.colorful[color='red']
  set_dynamic_color($c-red)
.colorful[color='orange']
  set_dynamic_color($c-orange)
.colorful[color='amber']
  set_dynamic_color($c-amber)
.colorful[color='yellow']
  set_dynamic_color($c-yellow)
.colorful[color='green']
  set_dynamic_color($c-green)
.colorful[color='cyan']
  set_dynamic_color($c-cyan)
.colorful[color='blue']
  set_dynamic_color($c-blue)
.colorful[color='purple']
  set_dynamic_color($c-purple)
.colorful[color='theme']
  set_dynamic_color($color-theme)
.colorful[color='accent']
  set_dynamic_color($color-accent)

.colorful[color='light']
  --theme-block: white
  set_text_black()

.colorful[color='dark']
  --theme-block: #333
  set_text_white()

.colorful[color='warning']
  --theme: $c-yellow
  --theme-border: #ffe659
  --theme-block: #ffe659
  --theme-link: #ff453a

.colorful[color='error']
  --theme: $c-yellow
  --theme-border: #ff453a
  --theme-block: #ff453a
  --theme-link: #ffe659
  set_text_white()

_dark_tags()
  set_dynamic_color($theme)
    --theme: $theme
    --theme-border: hsl(hue($theme), 50, 24)
    --theme-block: hsl(hue($theme), 16, 16)
    --theme-codeblock: hsl(hue($theme), 12, 18)
    --text: hsl(hue($theme), 100, 85)
    --text-p1: hsl(hue($theme), 50, 75)
    --text-p2: hsl(hue($theme), 80, 72)
  .tag-plugin.tag
    set_dynamic_color($color-theme)
  .colorful[color='red']
    set_dynamic_color($c-red)
  .colorful[color='orange']
    set_dynamic_color($c-orange)
  .colorful[color='amber']
    set_dynamic_color($c-amber)
  .colorful[color='yellow']
    set_dynamic_color($c-yellow)
  .colorful[color='green']
    set_dynamic_color($c-green)
  .colorful[color='cyan']
    set_dynamic_color($c-cyan)
  .colorful[color='blue']
    set_dynamic_color($c-blue)
  .colorful[color='purple']
    set_dynamic_color($c-purple)
  .colorful[color='light']
    --theme-border: white
    --theme-block: #fff
    set_text_black()

  .colorful[color='dark']
    --theme-border: black
    --theme-block: #111
    set_text_white()

  .colorful[color='warning'],.colorful[color='light']
    set_text_black()


:root[data-theme="dark"]
  _dark_tags()
:root:not([data-theme])
  @media (prefers-color-scheme: dark)
    _dark_tags()

